<template>
  <div class="menu-wrapper">
    <!--    <company-dialog ref="officeDialog" @confirm="dialogConfirm" />-->
    <!--    <office-dialog ref="officeDialog" @confirm="officeConfirm"/>-->
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <div
        style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px"
      >
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">修改产品信息</span>
      </div>
      <el-form-item label="产品名称:" prop="name">
<!--        <el-col :span="6">-->
<!--          <el-input disabled v-model="form.name" />-->
<!--        </el-col>-->
        <el-col :span="6">
          <queryGoods @queryGoodsClick="queryGoodsClick" :shopname="form.name"></queryGoods>
        </el-col>
      </el-form-item>
      <el-form-item label="产品编码 :" prop="sn">
        <el-col :span="6">
          <span disabled>{{ form.sn }}</span>
        </el-col>
      </el-form-item>
      <!--<el-form-item label="卖家名称:" prop="customerName">-->
        <!--<el-col :span="6">-->
          <!--<query-supplier @querySupplier='querySupplierClick' :supplierName="form.customerName"-->
                          <!--:supplierId="form.customerId"/>-->
        <!--</el-col>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="供 应 商:" prop="customerName">-->
        <!--<el-col :span="6">-->
          <!--<el-input v-model="query.customerName" disabled/>-->
        <!--</el-col>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="所属公司:" prop="companyName">-->
        <!--<el-col :span="6">-->
          <!--<query-company @queryCompanyClick="queryCompanyClick" :name="form.companyName"-->
                         <!--:companyId="form.companyId"></query-company>-->
        <!--</el-col>-->
      <!--</el-form-item>-->
      <el-form-item label="油价:" prop="price">
        <el-col :span="6">
          <el-input-number :controls="false" v-model="form.price" clearable/>
        </el-col>
      </el-form-item>
      <el-form-item label="最小起订量:" prop="minimum">
        <el-col :span="6">
          <el-input-number :controls="false"  v-model="form.minimum" clearable/>
        </el-col>
      </el-form-item>
      <el-form-item label="锁油期限:" prop="limitDay">
        <el-col :span="6">
          <el-input-number :controls="false"  v-model="form.limitDay" clearable/>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="clicked" v-permission="['product.edit']" @click="update('form')">修 改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped>
.menu-wrapper {
  margin: 15px;
}
/deep/ .el-input-number--mini{
  width: 100%;
}
/deep/ .el-input__inner{
  text-align: left !important;
}
</style>
<script>
import permission from "@/directive/permission/index.js"; // 权限判断指令
import {EventBus} from "@/api/eventBus";
import utils from "../../utils/utils.js";
import md5 from "js-md5";
// import Distpicker from "@/components/Distpicker/Distpicker";
import {update, find} from "@/api/product";
import {find as goodsFind} from "@/api/goods"

import QueryGoods from "@/components/Query/queryGoods";
import QuerySupplier from "@/components/Query/querySupplier";
import QueryCompany from "@/components/Query/queryCompany";
import loadMore from "@/utils/loadMore";


export default {
  name: "product-edit",
  directives: {permission},

  components: {
    QuerySupplier,
    QueryGoods,
    QueryCompany
  },
  data() {
    return {
      form: {
        id: '',
        goodsId: '',
        name: '',
        sn: '',
        companyId: '',
        companyName: '',
        customerName: '',
        customerId: '',
        price: null,
        minimum: null,
        limitDay: null,
      },
      clicked: false,
      query: {
        goodsId: '',
        name: '',
        customerId: '',
        customerName: '',
        companyId: '',
        companyName: '',
      },
      rules: {
        name: [
          {required: true, message: "请选择产品名称", trigger: "blur"},
          {min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur"}
        ],
//        customerName: [
//          {required: true, message: "请选择联系人", trigger: "blur"}
//        ],
        price: [
          { type:'number', required: true, message: "请输入油价", trigger: "blur"}
        ],
        minimum: [
          { type:'number', required: true, message: "请输入最小起订量", trigger: "blur"}
        ],
        limitDay: [
          { type:'number', required: true, message: "请输入锁油期限", trigger: "blur"}
        ],

        // msg:[
        //   { required: true, message: "请输入详情地址", trigger: "blur"}
        // ],
      },

    };
  },
  created() {
    var _this = this;
    _this.getData();
  },
  watch: { // 路由地址不变的情况下,如果id变化则重新获取数据
    $route(newVal, oldVal) {
      if (newVal.name == 'product-edit' && newVal.query.id != this.id) {
        this.getData()
      }
    },
    'form.name': {
      deep: true,
      handler: function (newV, oldV) {
        goodsFind(this.query.goodsId || this.form.goodsId).then(res => {
          console.log(res, 'gxgoods')
          this.form.sn = res.data.goods.sn
        })
      }
    }
  },
  methods: {
    querySupplierClick(item) {
      console.log("选择2", item)
      this.query.customerId = item.id
      this.query.customerName = item.name
      this.form.customerName = this.query.customerName
      console.log("选择供应商", this.form.customerName, this.query.customerId)
    },
    queryGoodsClick(item) {
      console.log("选择1", item)
      this.query.goodsId = item.shopId
      this.query.name = item.name
      this.form.name = this.query.name
      console.log("选择商品", item, this.query)
    },
    queryCompanyClick(item) {
      console.log("选择3", item)
      this.query.companyId = item.companyId
      this.query.companyName = item.name
      this.form.companyName = this.query.name
      console.log("选择公司", item, this.query)
    },
    getData() {
      this.form.id = this.$route.query.id;
      var _this = this;
      find(_this.form.id)
        .then(response => {
          if (response.type == "success") {
            _this.form = response.data.product;
          } else {
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });

          }
        })
        .catch(error => {
        });
    },

    update(form) {
      const _this = this;
      console.log("form", this.$refs[form].model);
      // console.log("点击创建了", this.$refs[form],)
      this.$refs[form].validate(valid => {
        console.log("点击创建了", valid)
        if (valid) {
          // 校验表单
          var list = {
            id: _this.form.id,
            name: _this.form.name,
            sn: _this.form.sn,
//            companyId: _this.query.companyId,
//            companyName: _this.query.companyName,
//            customerId: _this.query.customerId,
            price: _this.form.price,
            minimum: _this.form.minimum,
            limitDay: _this.form.limitDay,
//            goodsId: _this.query.goodsId,
          }
          _this.clicked = true;
          update(list)
            .then(response => {
              _this.clicked = false;
              if (response.type == "success") {
                let data = _this.formatList(response.data);
                console.log("修改完返回给列表的数据--" + JSON.stringify(data));
                EventBus.$emit("product-edit", data);
                _this.$store
                  .dispatch("tagsView/delView", _this.$route)
                  .then(({visitedViews}) => {
                    _this.$router.push({
                      path: "/product/list",
                      query: {id: _this.form.id, name: _this.form.name}
                    });
                  }); // 关闭当前tab回到列表
              } else {
                _this.$message({
                  message: response.content,
                  offset: 120,
                  center: true
                });
                console.log("content", response.content);

              }
            })
            .catch(error => {
              _this.clicked = false;
            });
        } else {
          return false;
        }
      });
    },
    //过滤成日期
    formatDate2Day(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    },

    //过滤到时间
    formatDate2Time(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },

    //过滤企业列表
    formatList(data) {
      data.createDate = this.formatDate2Day(data.createDate);
      data.modifyDate = this.formatDate2Time(data.modifyDate);
      data.rechangeDate = this.formatDate2Time(data.rechangeDate);
      return data;
    },
  }
};
</script>
